<template>
  <Loading v-show="isLoading"></Loading>
  <div v-show="isShow">
    <div>
      <span
        @click="$router.push('/')"
        class="backhome text-teal-500 hover:text-blue-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 cursor-pointer"
      >
        <i class="iconfont icon-home_24 font-bold mr-1"></i>首页
      </span>
      <span
        class="userinfo text-teal-500 hover:text-blue-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 cursor-pointer"
        v-if="isLogin == false"
        @click="$router.push('/login')"
        ><i class="iconfont icon-person_24 font-bold mr-1"></i>登录</span
      >
      <button
        type="button"
        v-else
        class="imginfo flex text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
        id="user-menu-button"
        aria-expanded="false"
        data-dropdown-toggle="user-dropdown"
        data-dropdown-placement="bottom"
      >
        <span class="sr-only">Open user menu</span>
        <!-- 用户登录头像 -->
        <img
          class="w-9 h-9 rounded-full"
          :src="$store.state.user.avatar"
          alt="user photo"
        />
      </button>
     
      <!-- Dropdown menu -->
      <div
        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
        id="user-dropdown"
      >
        <ul class="py-2 cursor-pointer" aria-labelledby="user-menu-button">
          <li>
            <a
              @click="$router.push('/admin')"
              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              <svg
                class="inline w-3 h-3 mb-2px mr-1 text-gray-700 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 20 20"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M10 14v4m-4 1h8M1 10h18M2 1h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z"
                />
              </svg>
              进入后台
            </a>
          </li>
          <li>
            <a
              data-modal-target="logout-modal"
              data-modal-toggle="logout-modal"
              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              <svg
                class="inline w-3 h-3 mb-2px mr-1 text-gray-700 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 16 16"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 8h11m0 0-4-4m4 4-4 4m-5 3H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h3"
                />
              </svg>
              退出登录
            </a>
          </li>
        </ul>
      </div>
      <!-- 退出登录 modal -->
      <div
        id="logout-modal"
        tabindex="-1"
        class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full"
      >
        <div class="relative w-full max-w-md max-h-full">
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <button
              type="button"
              class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
              data-modal-hide="logout-modal"
            >
              <svg
                class="w-3 h-3"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 14 14"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
                />
              </svg>
              <span class="sr-only">Close modal</span>
            </button>
            <div class="p-6 text-center">
              <svg
                class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 20 20"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                />
              </svg>
              <h3
                class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400"
              >
                是否退出登录?
              </h3>
              <button
                @click="logout"
                data-modal-hide="logout-modal"
                type="button"
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
              >
                确认
              </button>
              <button
                data-modal-hide="logout-modal"
                type="button"
                class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shell">
      <div
        class="image"
        :style="{ backgroundImage: 'url(' + mineDate.pictureOne + ')' }"
      ></div>
      <div class="headingone">
        <h1 class="one text-shadow-xl">
          <span>{{ mineDate.textOne }}</span> <br />{{
            $store.state.setting.author
          }}<span>...</span>
        </h1>
      </div>
      <div class="text bg-white dark:bg-gray-800 dark:text-white">
        <h1>{{ mineDate.textTwo }}</h1>
      </div>

      <div
        class="image"
        :style="{ backgroundImage: 'url(' + mineDate.pictureTwo + ')' }"
      ></div>
      <div class="heading">
        <h1 class="text-shadow-xl">{{ mineDate.textThree }}</h1>
      </div>
      <div class="text bg-white dark:bg-gray-800 dark:text-white">
        <h1>{{ mineDate.textFour }}</h1>
      </div>

      <div
        class="image"
        :style="{ backgroundImage: 'url(' + mineDate.pictureThree + ')' }"
      ></div>
      <div class="heading">
        <h1 class="text-shadow-xl">{{ mineDate.textFive }}</h1>
      </div>
      <div class="text bg-white dark:bg-gray-800 dark:text-white">
        <h1>{{ mineDate.textSix }}</h1>
      </div>

      <div
        class="image"
        :style="{ backgroundImage: 'url(' + mineDate.pictureFour + ')' }"
      ></div>
      <div class="heading">
        <h1 class="text-shadow-xl">{{ mineDate.textSeven }}</h1>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
import { showModel, showMessage } from "@/composables/util";
import { onMounted } from "vue";
import { initDropdowns, initCollapses, initModals } from "flowbite";
import { getBlogMineDetail } from "@/api/frontend/blogsetting";
import Loading from "../../components/Loading.vue";

// initialize components based on data attribute selectors
onMounted(() => {
  initCollapses();
  initDropdowns();
  initModals();
});

const store = useStore();
const route = useRoute();

const keys = Object.keys(store.state.user);
// console.log("====== keys");
// console.log(keys);
const isLogin = ref(keys.length > 0);

const logout = () => {
  //   console.log("登出");
  store.dispatch("logout");

  // 提示登出成功
  showMessage("退出登录成功", "success");

  isLogin.value = false;
};

const mineDate = ref({
  pictureOne: "",
  textOne: "",
  textTwo: "",
  pictureTwo: "",
  textThree: "",
  textFour: "",
  pictureThree: "",
  textFive: "",
  textSix: "",
  pictureFour: "",
  textSeven: "",
});

function getMine() {
  getBlogMineDetail().then((res) => {
    if (res.success == true) {
      mineDate.value = res.data;
    }
  });
}
getMine();
const isLoading = ref(true);
const isShow = ref(false);
// 由于图片文件有点大，设置计时器，两秒后取消加载效果
setTimeout(() => {
  isLoading.value = false;
  isShow.value = true;
}, 1000);
</script>

<style scoped>
.userinfo {
  position: absolute;
  z-index: 50;
  right: 30px;
  top: 30px;
}
.imginfo {
  position: absolute;
  z-index: 50;
  right: 50px;
  top: 25px;
}
.backhome {
  position: absolute;
  z-index: 50;
  right: 100px;
  top: 30px;
}
.shell {
  height: 100vh;
  overflow-x: hidden;
  perspective: 3px;
}
.shell div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
}
.image {
  transform: translateZ(-1px) scale(1.6);
  background-size: cover;
  height: 100vh;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
}
.text {
  height: 50vh;
}

.heading {
  z-index: -1;
  transform: translateY(-30vh) translateZ(1px);
  color: #fff;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.headingone {
  z-index: -1;
  transform: translateY(-55vh) translateZ(1px);
  color: #fff;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.one {
  color: #fff;
  /* font-size: 2rem; */
  /* 字间距 */
  /* letter-spacing: 5px; */
  /* 转大写 */
  text-transform: uppercase;
  text-align: center;
  outline: none;
  /* 自定义属性--c，可通过var函数对其调用 */
  /* --c: lightseagreen; */
  /* 调用自定义属性--c，设置文字阴影（发光效果） */
  /* text-shadow: 0 0 10px var(--c), 0 0 20px var(--c), 0 0 40px var(--c),
    0 0 80px var(--c), 0 0 160px var(--c); */
}
.one span {
  /* 动画过渡 */
  transition: 0.5s;
}
.one:hover span:nth-child(1) {
  margin-right: 20px;
}
.one:hover span:nth-child(1)::after {
  content: ":";
}
.one:hover span {
  color: #fff;
  font-weight: 600;
  /* 文字阴影 */
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
    0 0 120px #fff, 0 0 160px #fff;
}
</style>
